import angular from 'angular';

ngColDirective.$inject = [];

function ngColDirective() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="ng-col__inner" ng-transclude></div>',
    scope: {
      span: '@?',       // 栅格占据的列数（1-24）
      offset: '@?',     // 栅格左侧的间隔格数
      xs: '=?',         // <768px 响应式栅格数或对象 {span: X, offset: Y}
      sm: '=?',         // ≥768px 响应式栅格数或对象
      md: '=?',         // ≥992px 响应式栅格数或对象
      lg: '=?',         // ≥1200px 响应式栅格数或对象
      xl: '=?'          // ≥1920px 响应式栅格数或对象
    },
    link: function(scope, element) {
      var colElement = element[0];
      var colEl = angular.element(colElement);
      var appliedClasses = [];

      // 默认值
      scope.span = scope.span || '24';
      scope.offset = scope.offset || '0';

      // 更新列样式
      function updateCol() {
        var classList = ['ng-col'];

        // 基础 span
        var span = parseInt(scope.span) || 24;
        if (span > 0 && span <= 24) {
          classList.push('ng-col-' + span);
        }

        // offset
        var offset = parseInt(scope.offset) || 0;
        if (offset > 0 && offset < 24) {
          classList.push('ng-col-offset-' + offset);
        }

        // 响应式断点
        var breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
        breakpoints.forEach(function(bp) {
          var config = scope[bp];

          if (config !== undefined && config !== null) {
            // 如果是数字，表示 span
            if (angular.isNumber(config) || (angular.isString(config) && !isNaN(config))) {
              var bpSpan = parseInt(config);
              if (bpSpan > 0 && bpSpan <= 24) {
                classList.push('ng-col-' + bp + '-' + bpSpan);
              }
            }
            // 如果是对象 {span: X, offset: Y}
            else if (angular.isObject(config)) {
              if (config.span !== undefined) {
                var bpSpan = parseInt(config.span);
                if (bpSpan > 0 && bpSpan <= 24) {
                  classList.push('ng-col-' + bp + '-' + bpSpan);
                }
              }
              if (config.offset !== undefined) {
                var bpOffset = parseInt(config.offset);
                if (bpOffset > 0 && bpOffset < 24) {
                  classList.push('ng-col-' + bp + '-offset-' + bpOffset);
                }
              }
            }
          }
        });

        // 移除之前的类
        appliedClasses.forEach(function(cls) {
          colEl.removeClass(cls);
        });
        // 添加新类
        classList.forEach(function(cls) {
          colEl.addClass(cls);
        });
        appliedClasses = classList;

        // 应用 gutter padding
        colEl.css({
          'padding-left': 'calc(var(--row-gutter, 0px) / 2)',
          'padding-right': 'calc(var(--row-gutter, 0px) / 2)'
        });
      }

      // 监听属性变化
      scope.$watch('span', updateCol);
      scope.$watch('offset', updateCol);

      // 监听响应式属性变化
      ['xs', 'sm', 'md', 'lg', 'xl'].forEach(function(bp) {
        scope.$watch(bp, updateCol, true);
      });

      // 初始化
      updateCol();
    }
  };
}

export default ngColDirective;
